<template>
  <div class="cartbrand">
    <div class="head">
      <van-icon name="arrow-left" class="left" @click="back" />
      <input
        type="text"
        :placeholder="this.$route.params.brand"
        class="headinput"
      />
    </div>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </van-sticky>
    <main>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-card
          v-for="goods in goodslist"
          :key="goods.proid"
          :price="goods.originprice"
          :title="goods.proname"
          :thumb="goods.img1"
          @click="leap(goods.proid)"
        />
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from "vant";
import { NavBar,Search,DropdownMenu, DropdownItem } from 'vant';

Vue.use(NavBar);
Vue.use(Search);
Vue.use(Toast);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
import {doBrandPro} from "../../api/kind";
export default {
  name: "CateBrand",
  data() {
    return {
      goodslist: [],
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    leap(proid) {
      this.$router.push("/Detail/" + proid);
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
  created() {
    doBrandPro({
          category: this.$route.params.phone,
          brand: this.$route.params.brand,
        })
      .then((res) => {
        console.log(this.$route.params);
        console.log(res.data);
        if (res.data.code == 200) {
          this.goodslist = res.data.data;
        }
      });
  },
};
</script>

<style scoped>
.head {
  height: 40px;
  background-color: white;
  display: flex;
  position: relative;
  align-items: center;
}
.left {
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
}
.headinput {
  height: 32px;
  text-align: center;
  background: rgb(233, 231, 231);
  border-radius: 24px;
  border: none;
  width: 300px;
}
.cartbrand {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
main {
  flex: 1;
  height: 100%;
  overflow: auto;
}
</style>
<style>
.van-pull-refresh{
  height: 100%;
}
</style>
